<template>
  <div>
    <p class="update-info">规则：1～8小、 10~18大、豹子顺子与大小不叠加</p>
    <div class="game">
      <p class="game-title">澳门赌场</p>
      <div class="game-left">
        <div style="font-size: 28px;text-align: center;color: red;border-bottom: 1px blue solid"><b>寶進財招</b></div>
        <div class="detail">
          <div class="corn" v-if="left_top.view">
            <span style="font-size: 10px">已下注：￥{{left_top.take}}<br>胜利可得:￥{{left_top.get}}</span>
            <div class="corn-1"></div>
            <div class="corn-1"></div>
          </div>
          <div class="corn" style="right: 0;" v-if="right_top.view">
            <span style="font-size: 10px;">已下注：￥{{right_top.take}}<br>胜利可得:￥{{right_top.get}}</span>
            <div class="corn-1"></div>
            <div class="corn-1"></div>
          </div>
          <div class="corn" style="bottom: 0;left: 0" v-if="left_bot.view">
            <p style="font-size: 10px;margin-top: 50px">已下注：￥{{left_bot.take}}<br>胜利可得:￥{{left_bot.get}}
          </p>
            <div class="corn-1"></div>
            <div class="corn-1"></div>
          </div>
          <div class="corn" style="bottom: 0;right: 0" v-if="right_bot.view">
            <p style="font-size: 10px;margin-top: 50px">已下注：￥{{right_bot.take}}<br>胜利可得:￥{{right_bot.get}}
          </p>
            <div class="corn-1"></div>
            <div class="corn-1"></div>
          </div>
          <div class="waiquan">
            <div class="tp" style="position: absolute;top:75px;left:75px;">大</div>
            <div class="tp" style="position: absolute;top:75px;right:75px;">豹</div>
            <div class="tp" style="position: absolute;bottom:75px;left:75px;">顺</div>
            <div class="tp" style="position: absolute;bottom:75px;right:75px;">小</div>
            <el-tooltip content="点击下注~此区域压一赔二" placement="right">
              <div class="caozuo" @click="game_xiazhu(2,1)">
              </div>
            </el-tooltip>
            <el-tooltip content="点击下注~此区域压一赔五十" placement="left">
              <div class="caozuo" style="margin-left: 5px" @click="game_xiazhu(50,2)">
              </div>
            </el-tooltip>
            <el-tooltip content="点击下注~此区域压一赔五十" placement="right">
              <div class="caozuo" @click="game_xiazhu(50,3)">
              </div>
            </el-tooltip>
            <el-tooltip content="点击下注~此区域压一赔二" placement="left">
              <div class="caozuo" style="margin-left: 5px" @click="game_xiazhu(2,4)">
              </div>
            </el-tooltip>
            <div class="line_1"></div>
            <div class="line_2"></div>
            <div class="neiquan">
              <div class="nq-1 nq-2" style="background-color: black;">{{text.title}}</div>
              <div class="nq-1" style="height: 120px;">
                <div class="shaizi" :class="'img' + img.img1"></div>
                <div class="shaizi" :class="'img' + img.img2"></div>
                <div class="shaizi" :class="'img' + img.img3"></div>
              </div>
              <div class="nq-1 nq-2 nq-3" @click="begain(2)" v-if="bg"><b>停止</b></div>
              <div class="nq-1 nq-2 nq-3" @click="begain(1)" v-else><b>开始</b></div>
            </div>
          </div>
        </div>
        <div class="detail-xiazhu" v-if="game_xz">
          <div style="font-size: 2rem;">{{text.xz}}</div>
          <div style="margin-top: 30px;">已押<span style="color: yellow;font-size: 1.5rem">{{xz_money}}</span>元
            <br>当前赔率：{{take_money.peilv}}~~~~胜利可得<span style="color: yellow;font-size: 1.5rem">{{pei}}</span>元
          </div>
          <div style="margin-top: 30px;">
            <span>快速选择：</span>
            <el-button v-for="(item,index) in xz_but" :key="index" round @click="quick_select(item)">+￥{{item}}</el-button>
          </div>
          <div style="margin-top: 10px"><span>自由调整:</span>
            <div class="el-input-number">
              <input type="number" v-model="take_money.num1" class="el-input__inner" :min="1" :max="info.corn">
            </div>
            </div>
            <!--<el-input-number v-model="take_money.num1" :min="0" @change.native="change"></el-input-number>-->
          <!--</div>-->
          <div style="margin-top: 20px">
            <el-button @click="game_xz = false">取消</el-button>
            <el-button type="primary" @click="xz_con">确认</el-button>
          </div>
        </div>
      </div>
      <div class="game-right">
        <div style="margin-top: 20px">
          <p style="font-size: 30px;color: darkred"><b>个人中心</b></p>
          <p style="color: yellow;margin-top: 5px">{{info.name}}</p>
          <p style="margin-top: 10px;font-size: 20px">账户余额<br><span
            style="color: red;font-size: 25px">{{info.corn}}</span>元</p>
          <p style="margin-top: 10px">亲爱的用户，根据你的资产情况，您被判定为：</p>
          <p style="font-size: 30px;margin-top: 10px"><b>{{info.honer}}</b></p>
          <el-tooltip content="充值余额快速成为土豪" placement="top">
            <button class="jx" @click="centerDialogVisible = true">余额充值</button>
          </el-tooltip><br>
          <a href="http://192.168.13.81:8000/vue/game/dc/data/" target="_blank"> 查看开奖记录数据</a>
        </div>
      </div>
      <p class="update-info" style="margin-top: 10px">广告区：现金交易，一比一对等。欢迎你的挑战！相信我，到最后你肯定是赢的</p>
    </div>
    <el-dialog
      title="请输入充值金额"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <el-input v-model="input" type="number" :min="0" placeholder="充值比例为1:1"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="cz">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {api, URL} from '../../api/index'

export default {
  data () {
    return {
      img: {img1: 6, img2: 6, img3: 6},
      info: {name: '', corn: 0, honer: ''},
      centerDialogVisible: false, // 充值余额的弹窗
      game_xz: false, // 下注弹窗
      bg: false, // 开始按钮
      xz_but: ['10', '20', '50', '1000'], // 按钮快速下注
      take_money: {num1: 0, peilv: 0},
      input: '', // 充值的钱数
      text: {title: '澳门皇家赌场', bg: '开始', xz: '下注'}, // 标题以及提示消息
      left_top: {view: false, take: 0, get: 0}, // 左上下注内容
      right_top: {view: false, take: 0, get: 0},
      left_bot: {view: false, take: 0, get: 0},
      right_bot: {view: false, take: 0, get: 0},
      sj: '', // 随机效果
      code: {type: 0, type_list: []}
    }
  },
  methods: {
    base () {
      // 基本信息
      api.get('/vue/game/dc/').then(res => {
        this.info = res.data
      })
    },
    cz () {
      // 充值提交
      let num = this.input
      if (!num) {
        this.$message({type: 'success', message: '请输入金额！', center: true})
        return
      }
      api.post('/vue/game/dc/update/?type=1', {num: num}).then(res => {
        if (res.status === -1) {
          this.$alert(res.message, '错误提示！', {center: true, type: 'warning'})
        } else {
          this.$alert('充值成功!', {center: true, type: 'warning'})
          this.base()
        }
        this.centerDialogVisible = false
      })
    },
    game_xiazhu (type, m) {
      // 点击下注后执行的方法，出遮照
      if (this.bg) {
        this.text.title = '开始后不能再次下注'
        this.$message({message: '已开始，不能下注', type: 'warning', center: true})
        return
      } else if (this.info.corn === 0) {
        this.$alert('余额不足，请充值', '提示', {center: true, type: 'warning'})
        return
      }
      this.game_xz = true
      this.take_money.peilv = type
      this.code.type = m
    },
    xz_con () {
      // 下注确定
      if (this.xz_money <= 0) {
        this.text.xz = '下注金额不能低于1元'
        return
      } else if (this.info.corn < this.take_money.num1) {
        this.$alert('金额超出范围，取最大值', '提示', {center: true, type: 'warning'})
        this.take_money.num1 = this.info.corn
      }
      this.info.corn = this.info.corn - this.xz_money // 更新余额
      this.game_xz = false // 遮照消失
      if (this.code.type === 1) {
        this.left_top = {view: true, take: this.left_top.take + this.xz_money, get: this.left_top.get + this.pei}
      } else if (this.code.type === 2) {
        this.right_top = {view: true, take: this.right_top.take + this.xz_money, get: this.right_top.get + this.pei}
      } else if (this.code.type === 3) {
        this.left_bot = {view: true, take: this.left_bot.take + this.xz_money, get: this.left_bot.get + this.pei}
      } else if (this.code.type === 4) {
        this.right_bot = {view: true, take: this.right_bot.take + this.xz_money, get: this.right_bot.get + this.pei}
      }
      this.text.xz = '下注'
      this.code.type_list.push(this.code.type)
      this.text.title = '已下注，请开始'
      this.take_money.num1 = 0 // 再次下注默认为0
    },
    quick_select (num) {
      if (this.info.corn < (Number(num) + Number(this.take_money.num1))) {
        this.text.xz = '余额不足，请充值'
      } else {
        this.text.xz = '下注'
        this.take_money.num1 = Number(num) + Number(this.take_money.num1)
      }
    },
    random () {
      let n1 = Math.ceil(Math.random(0, 1) * 6)
      let n2 = Math.ceil(Math.random(0, 1) * 6)
      let n3 = Math.ceil(Math.random(0, 1) * 6)
      this.img = {img1: n1, img2: n2, img3: n3}
    },
    begain (n) {
      // n=1 点击开始按钮 n2点击停止按钮
      if (this.code.type_list.length === 0) {
        this.$message({message: '请先下注', type: 'warning', center: true})
        this.text.title = '请先下注'
        return
      }
      if (n === 1) {
        this.bg = true
        this.sj = setInterval(() => {
          this.random()
        }, 50)
      } else {
        this.bg = false
        clearInterval(this.sj)
        // this.img = {img1: 2, img2: 3, img3: 4}
        api.post('/vue/game/dc/coll/', this.img).then(res => {})
        this.result(this.code.type)
      }
    },
    clear_data () {
      // 完成流程清楚数据
      this.code = {type: 0, type_list: []}
      this.text.title = '澳门皇家赌场'
      this.left_top = {view: false, take: 0, get: 0}
      this.right_top = {view: false, take: 0, get: 0}
      this.left_bot = {view: false, take: 0, get: 0}
      this.right_bot = {view: false, take: 0, get: 0}
    },
    result (n) {
      let a1 = Number(this.img.img1)
      let a2 = Number(this.img.img2)
      let a3 = Number(this.img.img3)
      let all = 0
      let take = 0
      if (a1 === a2 && a2 === a3 && a1 === a3) {
        if (this.code.type_list.indexOf(2) >= 0) {
          this.$alert('恭喜运气爆棚，获得豹子!获得' + this.right_top.get + '元', '豹子提示！', {center: true, type: 'success'})
          all = this.right_top.get + this.info.corn // 中奖时传入计算之后的金额
        } else {
          let get = (this.right_top.take + this.left_bot.take + this.right_bot.take + this.left_top.take) * 5
          all = get + this.info.corn
          this.$alert('豹子有喜，所有下注五倍返还--获得' + get + '元', '豹子提示！', {center: true, type: 'success'})
        }
      } else if (((a2 === a1 + 1 && a3 === a2 + 1) || (a1 === a2 + 1 && a2 === a3 + 1))) {
        if (this.code.type_list.indexOf(3) >= 0) {
          this.$alert('恭喜运气爆棚，获得顺子!获得' + this.left_bot.get + '元', '顺子提示！', {center: true, type: 'success'})
          all = this.left_bot.get + this.info.corn
        } else {
          let get = (this.right_top.take + this.left_bot.take + this.right_bot.take + this.left_top.take) * 3
          all = get + this.info.corn
          this.$alert('顺子有喜，所有下注三倍返还--获得' + get + '元', '顺子提示！', {center: true, type: 'success'})
        }
      } else if ((a1 + a2 + a3) <= 9 && this.code.type_list.indexOf(4) >= 0) {
        this.$alert('恭喜你中奖啦！--小!获得' + this.right_bot.get + '元', '中奖提示！', {center: true, type: 'success'})
        all = this.right_bot.get + this.info.corn
      } else if ((a1 + a2 + a3) <= 18 && (a1 + a2 + a3) >= 12 && this.code.type_list.indexOf(1) >= 0) {
        this.$alert('恭喜你中奖啦！--大!获得' + this.left_top.get + '元', '中奖提示！', {center: true, type: 'success'})
        all = this.left_top.get + this.info.corn
      } else {
        this.$alert('再接再厉，大奖在等你', '提示！', {center: true, type: 'info'})
        take = this.info.corn
      }
      if (all === 0) {
        api.post('/vue/game/dc/update/?type=2', {'num': take}).then(res => {
          this.info = res.data
          this.clear_data()
        })
      } else {
        api.post('/vue/game/dc/update/?type=3', {'num': all}).then(res => {
          this.info = res.data
          this.clear_data()
        })
      }
    }
  },
  computed: {
    pei () {
      return this.xz_money * Number(this.take_money.peilv)
    },
    xz_money () {
      return Number(this.take_money.num1)
    }
  },
  created () {
    this.base()
  }
}
</script>

<style scoped>
  p {
    margin: 0;
  }
  .game {
    /*background-image: url("../assets/xue.jpg");*/
    /*background-size: 100% 100%;*/
    background-color: whitesmoke;
    width: 750px;
    height: 530px;
    position: relative;
  }

  .update-info {
    font-size: 0.8rem;
    height: 25px;
    color: gray;
  }

  .game-title {
    font-size: 1.5rem;
    text-align: center;
  }

  .game-left {
    background-color: azure;
    height: 480px;
    width: 550px;
    margin-top: 5px;
  }

  .game-right {
    position: absolute;
    top: 41px;
    right: 10px;
    background-color: lightskyblue;
    width: 180px;
    height: 480px;
    text-align: center;
  }

  .jx {
    margin-top: 50px;
    background-color: dodgerblue;
    font-size: 1.3rem;
    border-radius: 50px;
    cursor: pointer;
    width: 150px;
    height: 50px;
    color: white;
  }

  .jx:hover {
    background-color: lightskyblue;
    color: black;
  }

  .detail {
    background-color: lightskyblue;
    width: 480px;
    height: 420px;
    margin-top: 5px;
    margin-left: 35px;
    position: relative;
    z-index: 11;
  }

  .waiquan {
    background-color: limegreen;
    width: 480px;
    height: 420px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 0 1px 1px grey;
  }

  .neiquan {
    background-color: powderblue;
    width: 300px;
    height: 240px;
    border-radius: 50%;
    position: absolute;
    top: 90px;
    left: 90px;
    z-index: 12;
    overflow: hidden;
    border: 1px black double;
  }

  .line_1 {
    width: 480px;
    height: 10px;
    background-color: deeppink;
    position: absolute;
    top: 205px;
    z-index: 10;
  }

  .line_2 {
    width: 10px;
    height: 430px;
    background-color: deeppink;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 235px;
  }

  .caozuo {
    width: 235px;
    height: 210px;
    /*background-color: black;*/
    display: inline-block;
    cursor: pointer;
    /*position: relative;*/
  }

  .caozuo:hover {
    background-color: green;
  }

  .tp {
    /*text-align: center;*/
    font-size: 2rem;
    color: goldenrod;
    cursor: pointer;
    /*line-height: 210px;*/
  }

  .corn {
    width: 100px;
    height: 100px;
    position: absolute;
    /*background-color: black;*/
    text-align: center;
  }

  .corn-1 {
    width: 20px;
    height: 10px;
    border-radius: 50%;
    background-color: yellow;
    box-shadow: 1px 1px 1px 1px grey;
    display: inline-block;
    margin-left: 5px;
  }
  .detail-xiazhu{
    position: absolute;
    top:83px;
    left: 0;
    height: 438px;
    width: 550px;
    z-index: 20;
    color: white;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.7);
    /*background-color: black;*/
  }
  .nq-1{
    width: 300px;
    text-align: center;
  }
  .nq-2{
    color: white;line-height: 60px;
    height: 60px;
  }
  .nq-3{
    cursor: pointer;
    font-size: 30px;
    color: black;
    background-color:lightskyblue
  }
  .nq-3:hover{
    background-color: dodgerblue;
  }
  .shaizi{
    height: 80px;
    width: 80px;
    /*background-color: white;*/
    display: inline-block;
    margin-top: 17px;
  }
  .img1{
    background-image: url("./imgs/1.png");
    background-size: cover;
  }
  .img2{
    background-image: url("./imgs/2.png");
    background-size: cover;
  }
  .img3{
    background-image: url("./imgs/3.png");
    background-size: cover;
  }
  .img4{
    background-image: url("./imgs/4.png");
    background-size: cover;
  }
  .img5{
    background-image: url("./imgs/5.png");
    background-size: cover;
  }
  .img6{
    background-image: url("./imgs/6.png");
    background-size: cover;
  }
</style>
